<div class="flex justify-between items-center mb-2">
  <div class="flex items-center gap-2 text-text-primary">
    <span class="text-sm">
      {{title()}}
    </span>

    <i class="ri-question-line text-text-quaternary hover:text-text-tertiary"
      [matTooltip]="tooltip()"
      matTooltipPosition="above"></i>
  </div>

  <div class="flex gap-2 items-center">
    <button type="button" class="action-btn action-btn-m"
      (click)="add()"
    >
      <i class="ri-add-line"></i>
    </button>
  </div>
</div>

<div class="flex flex-col gap-4">
  @for (memory of memories(); track memory.id; let i = $index) {
    <div class="flex">
      <div class="w-full flex-1 flex flex-col items-start gap-2 overflow-hidden">

        <xpert-state-variable-select class="w-full opacity-90 hover:opacity-100"
          [variables]="variables()"
          [ngModel]="memory.variableSelector"
          [ngModelOptions]="{standalone: true}"
          (ngModelChange)="updateMemory(i, 'variableSelector', $event)"
        />

        <div class="w-full flex items-center gap-2">
          <ngm-select class="w-28 border-0 opacity-70 hover:opacity-100"
            [nullable]="false"
            [selectOptions]="InputTypeOptions"
            [placeholder]="'PAC.Xpert.InputType' | translate: {Default: 'InputType'}"
            [ngModel]="memory.inputType"
            [ngModelOptions]="{standalone: true}"
            (ngModelChange)="updateMemory(i, 'inputType', $event)"
          />

          @if (memory.inputType === 'constant') {
            <input class="grow rounded-lg text-sm bg-gray-100 px-2 py-1 focus:bg-white opacity-70 hover:opacity-100 focus:opacity-100"
              [ngModel]="memory.value"
              (ngModelChange)="updateMemory(i, 'value', $event)">
          } @else {
            <ngm-select class="grow border-0 opacity-70 hover:opacity-100"
              [selectOptions]="ValueOptions()"
              [placeholder]="'PAC.Xpert.OutputVariable' | translate: {Default: 'Output variable'}"
              [ngModel]="memory.value"
              [ngModelOptions]="{standalone: true}"
              (ngModelChange)="updateMemory(i, 'value', $event)"
            />
          }
        </div>
      </div>

      <div class="flex flex-col p-1">
        <button type="button" class="action-btn action-btn-l w-7 h-7 danger flex-shrink-0 group flex justify-center items-center rounded-lg overflow-hidden"
          (click)="deleteMemory(i)">
          <i class="ri-delete-bin-line"></i>
        </button>
      </div>
    </div>
  }
</div>